<template>
  <div class="teacher-statistics">
    <a-row :gutter="16">
      <a-col :span="16">
        <a-table
          :columns="columns"
          :dataSource="data"
          rowKey="teacher"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template slot="adjustCount" slot-scope="text">
            <a-badge :count="text" :numberStyle="{backgroundColor: '#1890ff'}" />
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="handleViewDetail(record)">查看详情</a>
          </template>
        </a-table>
      </a-col>
      <a-col :span="8">
        <div class="chart-container">
          <h3>教师调课分布</h3>
          <chart-pie 
            :height="300" 
            :data="pieChartData"
          />
        </div>
      </a-col>
    </a-row>

    <a-drawer
      title="教师调课详情"
      :width="600"
      :visible="detailVisible"
      @close="detailVisible = false"
    >
      <div v-if="currentTeacher">
        <h4>{{ currentTeacher.teacher }} 的调课记录</h4>
        <chart-line 
          :data="teacherTrendData"
          :height="250"
          style="margin-bottom: 24px;"
        />
        <a-table
          :columns="detailColumns"
          :dataSource="currentTeacher.details"
          rowKey="id"
          size="small"
        />
      </div>
    </a-drawer>
  </div>
</template>

<script>
import ChartLine from '@/components/Charts/ChartLine.vue'
import ChartPie from '@/components/Charts/ChartPie.vue'

const columns = [
  {
    title: '教师姓名',
    dataIndex: 'teacher',
    sorter: true
  },
  {
    title: '所属院系',
    dataIndex: 'department'
  },
  {
    title: '调课次数',
    dataIndex: 'adjustCount',
    scopedSlots: { customRender: 'adjustCount' },
    sorter: (a, b) => a.adjustCount - b.adjustCount
  },
  {
    title: '调课学时',
    dataIndex: 'adjustHours',
    sorter: (a, b) => a.adjustHours - b.adjustHours
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

const detailColumns = [
  {
    title: '课程名称',
    dataIndex: 'course'
  },
  {
    title: '原时间',
    dataIndex: 'originalTime'
  },
  {
    title: '调整后时间',
    dataIndex: 'adjustedTime'
  },
  {
    title: '调课原因',
    dataIndex: 'reason'
  }
]

export default {
  components: {
    ChartPie,
    ChartLine
  },
  props: {
    data: {
      type: Array,
      default: () => [
        {
          teacher: '王芳',
          department: '信息工程系',
          adjustCount: 5,
          adjustHours: 10,
          details: [
            {
              id: '1',
              course: '数据结构',
              originalTime: '周一 1-2节',
              adjustedTime: '周三 3-4节',
              reason: '参加学术会议'
            },
            {
              id: '2',
              course: '算法分析',
              originalTime: '周二 5-6节',
              adjustedTime: '周四 7-8节',
              reason: '病假'
            }
          ]
        },
        {
          teacher: '李廷',
          department: '机电工程系',
          adjustCount: 3,
          adjustHours: 6,
          details: [
            {
              id: '3',
              course: '高等数学（上）	',
              originalTime: '周三 3-4节',
              adjustedTime: '周五 1-2节',
              reason: '事假'
            }
          ]
        }
      ]
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        pageSize: 10,
        total: 0
      })
    }
  },
  data() {
    return {
      columns,
      detailColumns,
      detailVisible: false,
      currentTeacher: null
    }
  },
  computed: {
    teacherTrendData() {
      if (!this.currentTeacher) return {}
      return {
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
          {
            label: '调课次数',
            data: [1, 0, 2, 1, 1],
            borderColor: '#1890ff',
            backgroundColor: 'rgba(24, 144, 255, 0.1)',
            fill: true,
            tension: 0.1
          }
        ]
      }
    },
    // 新增：为饼图准备数据
    pieChartData() {
      // 按院系统计调课次数
      const departmentStats = this.data.reduce((acc, item) => {
        if (!acc[item.department]) {
          acc[item.department] = 0
        }
        acc[item.department] += item.adjustCount
        return acc
      }, {})
      
      // 转换为Chart.js需要的格式
      const labels = Object.keys(departmentStats)
      const data = Object.values(departmentStats)
      
      // 生成随机颜色
      const backgroundColors = labels.map(() => {
        const r = Math.floor(Math.random() * 255)
        const g = Math.floor(Math.random() * 255)
        const b = Math.floor(Math.random() * 255)
        return `rgba(${r}, ${g}, ${b}, 0.7)`
      })
      
      return {
        labels,
        datasets: [
          {
            data,
            backgroundColor: backgroundColors,
            borderWidth: 1
          }
        ]
      }
    }
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.$emit('change', pagination, filters, sorter)
    },
    handleViewDetail(record) {
      this.currentTeacher = record
      this.detailVisible = true
    }
  }
}
</script>

<style scoped>
.teacher-statistics {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}

.chart-container {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 16px;
  text-align: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}

h4 {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
}
</style>